<!doctype html>
<html lang="zxx">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Contact</title>
	<!-- Template CSS -->
	<link rel="stylesheet" href="assets/css/style-starter.css">
	<!-- Template CSS -->
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700&display=swap" rel="stylesheet">
	<!-- Template CSS -->
	 <style type="text/css">
	 	.contact{
			height: 270px;
			min-height: 270px;
			padding: 0!important;
			width: 100%;
		}
		.contact img {
			height: 100%;
			width: auto;
		}
		.address{
			background-color: #FFFFFF;padding: 10px;
		}
		.address .addressTop{
			display: flex;
			line-height: 1.1rem;
		}
		.addressTop .addressText{
			font-size: 1.1rem;font-weight: 700;margin-right: 20px;
		}
		.en{
			display: none;
		}
		.cn{
			display: none;
		}
	 </style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body >

	<!--w3l-header-->
	<header class="w3l-header-nav py-0 ">
		<div class="w3l-header-lang">
			<a class="navbar-brand" href="#index.html">
				<img src="./assets/images/logo3.png" alt="Your logo" title="Your logo" style="height:70px;width: 180px;" />
			</a>
			<div class="head-btn">
				<!-- <img data-lan='cn' class="imageToSwap" src="./assets/images/icon/cn.jpg" alt="flag">
				<img data-lan='en' class="imageToSwap" src="./assets/images/icon/en.jpg" alt="flag">	 -->
				<button data-lan='cn' class="imageToSwap" >中文</button>
				<button data-lan='en' class="imageToSwap" >English</button>
			</div>
		</div>	
		<!--/nav-->
		<nav class="navbar navbar-expand-lg navbar-light px-lg-0 px-3 stroke">
			<div class="container">
				<h1> </h1>
				<!-- <h1><a class="navbar-brand" href="index.html">Drifter<span>z</span></a></h1> -->
				<!-- if logo is image enable this  --> 
				<!-- <a class="navbar-brand" href="#index.html">
					<img src="./assets/images/logo_2.png" alt="Your logo" title="Your logo" style="height:55px;" />
				</a> -->
				<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
					data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="fa icon-expand fa-bars"></span>
					<span class="fa icon-close fa-times"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href="index.html">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="about.html">About</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="services.html">Services</a>
						</li>
						
						<li class="nav-item active">
							<a class="nav-link" href="contact.html">Contact</a>
						</li>
					</ul>
					<!--/search-right-->
					<!-- <div class="search-right">
						<a href="#search" title="search"><span class="fa fa-search" aria-hidden="true"></span></a>						
						<div id="search" class="pop-overlay">
							<div class="popup">
								<form action="#" method="post" class="search-box">
									<input type="search" placeholder="Search your Keyword" name="search"
										required="required" autofocus="">
									<button type="submit" class="btn"><span class="fa fa-search"
											aria-hidden="true"></span></button>
								</form>
							</div>
							<a class="close" href="#close">×</a>
						</div>					
					</div> -->
					<!--//search-right-->
				</div>
			</div>
		</nav>
		<!--//nav-->
	</header>
	<!-- //w3l-header -->
	<!-- /breadcrumbs -->
 
	<!-- //breadcrumbs -->
	<section class="w3l-open-block-services">
	<div class="w3l-open-block-services-div">
		<div class="container py-lg-5">			 
			<div class="row">
				<div class="col-md-6 p-lg-3">
					<div class="card text-center contact">
						<img src="./assets/images/contact/contact1.png" alt="">
					</div>
					<div class="address">
						<div class="addressTop">
							<div class="addressText cn">深圳</div><div class="cn">深圳市罗湖区人民南路2008号深圳嘉里中心2106</div>
							<div class="addressText en">Shenzhen</div>
							<div class="en">2106, Shenzhen Kerry Center, No. 2008, Renmin South Road, Luohu District, Shenzhen</div>
						</div>
						<div class="addressBottom">
							<span class="cn">联系电话:+86 0755-82281286 Email: info@zenith-log.com</span>
							<span class="en">Contact number of tel:+86 0755-82281286 email: info@zenith-log.com</span>
						</div>
					</div>
				</div>
				<div class=" col-md-6 p-lg-3">
					<!-- <div class="card text-center contact">
						<img src="./assets/images/contact/contact2.png" alt="">
					</div>
					<div class="address">
						<div class="addressTop">
							<div class="addressText cn">宁波</div>
							<div class="addressText en">Ningbo</div>
						</div>
						<div class="addressBottom">
							<span class="cn">联系电话 Tel：xxxxxxxxx Email：xxxxxxxx</span>
							<span class="en">Contact number of tel:xxxxxxxxx email:xxxxxxxx </span>
						</div>
					</div> -->
					<div id="dituContent"></div>
				</div>  
			</div>
			
		</div>
		
	</div>
	</section>
	<!-- /contact-form -->
	<!-- <section class="w3l-contact-11">
		  
		<body class="map">
		  
		  <div id="dituContent"></div>
		</body>
	</section> -->
	<!-- //contact-form -->
	 
<!-- footer-66 -->
<footer class="w3l-footer-66">
	<section class="footer-inner-main">
		 
		<div class="below-section">
			<div class="container">
				<div class="copyright-footer">
					<div class="columns text-lg-left">
						<p>Copyright &copy; 2020.Company name All rights reserved.
						<!-- <a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> --></p>
					</div>
					<!-- <ul class="columns text-lg-right">
						<li><a href="#">Privacy Policy</a>
						</li>
						<li><a href="about.html">About Us</a>
						</li>
						<li><a href="contact.html">Contact Us</a>
						</li>
					</ul> -->
				</div>
			</div>
		</div>
		<!-- copyright -->
		<!-- move top -->
		<button onclick="topFunction()" id="movetop" title="Go to top">
			<span class="fa fa-arrow-up" aria-hidden="true"></span>
		</button>
		<script>
			// When the user scrolls down 20px from the top of the document, show the button
			window.onscroll = function () {
				scrollFunction()
			};

			function scrollFunction() {
				if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
					document.getElementById("movetop").style.display = "block";
				} else {
					document.getElementById("movetop").style.display = "none";
				}
			}

			// When the user clicks on the button, scroll to the top of the document
			function topFunction() {
				document.body.scrollTop = 0;
				document.documentElement.scrollTop = 0;
			}
		</script>
		<!-- /move top -->

	</section>
</footer>
<!--//footer-66 -->
</body>

</html>

<script src="assets/js/jquery-3.3.1.min.js"></script>
<!-- disable body scroll which navbar is in active -->

<!--//-->
<script>
	$(function () {
		$('.navbar-toggler').click(function () {
			$('body').toggleClass('noscroll');
		})
	});

    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(114.125845,22.544053);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
    
    
    initMap();//创建和初始化地图
</script>
<script>
	if (window.location.search == '?cn' || !window.location.search) {
		languagechange('cn')
	} else if (window.location.search == '?en') {
		languagechange('en')
	} else {
		languagechange('cn')
	}
	$('.imageToSwap').on('click', function() {
		languagechange($(this).attr('data-lan'))
	})
	
	function languagechange(e) {
		let tap = []
		let title = []
		if (e == 'cn') {
			tap = ['首页', '企业概况', '业务范围', '联系我们']
			title = ['海运业务', '空运业务', '拼箱业务', '特种柜业务', '仓储服务', '拖车服务']
			$('.cn').css('display','block')
			$('.en').css('display','none')
		} else if (e == 'en') {
			tap = ['Home', 'About Zenith', 'Our Service', 'Contact us']
			title = ['Ocean Freight', 'Air Freight', 'LCL services', 'Special cargo', 'Warehouse Services', 'Trucking']
			$('.en').css('display','block')
			$('.cn').css('display','none')
		}
		$('.nav-link').each(function(i, v) {
			v.innerHTML = tap[i]
			var h = v.href
			var len = h.indexOf('?')
			console.log(len)
			if (len === -1) {
				v.href = h + '?' + e
			} else {
				v.href = h.substring(0, len) + '?' + e
				console.log(v.href)
			}
	
		})
		$('.icon-info h5').each(function(i,v){
			v.innerHTML = title[i]
		})
	}
</script>
<!--/scroll-down-JS-->
<!--//pop-up-box-->
<script src="assets/js/bootstrap.min.js"></script>